<template>
	<view class="generator_product_layout">
		<view class="product_content">
			<view class="generator_header">
				<image class="avtor" src="../../static/imgs/logo.jpg" mode="aspectFill"></image>
				<text class="user_name">达拉崩吧</text>
			</view>

			<view class="notice_bar_layout">
				<uni-notice-bar showIcon scrollable single text="坚守法律法规,绝不发布任何违法产品哈"></uni-notice-bar>
			</view>

			<view class="spu_content_layout">
				<uni-card class="card_content_layout" spacing="0" margin="0">
					<template v-slot:title>
						<view class="spu_name">
							<text>团购介绍</text>
						</view>
					</template>
					<view class="spu_titlte_layout">
						<input type="text" class="titlte" auto-height placeholder="请输入团购标题1" />
					</view>
					<!-- 商品内容区域：由于<component :is> 小程序无法编译。 暂时放弃此方案 -->
					<!-- 直接使用富文本编辑器实现 -->
					<view class="content-display">
						<view class="item_content_display" v-for="(item, index) in displayContent" :key="index">
							222
						</view>
					</view>
					

				</uni-card>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import TextItemVue from '../../components/TextItem/TextItem.vue';
	import BigImageItemVue from '../../components/BigImageItem/BigImageItem.vue';
	import SmallImageItemVue from '../../components/SmallImageItem/SmallImageItem.vue';
	import ProductVdieoItemVue from '../../components/ProductVdieoItem/ProductVdieoItem.vue';


	//商品内容区域组件数组
	const displayContent = ref([{
			component: TextItemVue,
			data: ''
		} // 默认富文本组件
	])
	//type对应的组件
	const components = {
		// 'big-image': BigImage,
		// 'small-image': SmallImage,
		// 'video-component': VideoComponent,
		'text': TextItemVue,
		'bigImage': BigImageItemVue,
		'smallImage': BigImageItemVue
	}
	//添加组件方法
	const addContent = (type) => {
		switch (type) {
			case 'bigImage':
				uni.chooseImage({
					count: 1, //默认9
					mediaType: ['image'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						//TODO 调用文件上传接口，将返回的地址传给子组件
						displayContent.value.push({
							component: SmallImageItemVue,
							data: res.tempFilePaths[0]
						})
					}
				});
				break;
			case 'smallImage':
				uni.chooseImage({
					count: 30, //默认9
					mediaType: ['image'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						//TODO 调用文件上传接口，将返回的地址传给子组件
						const data = res.tempFiles.map(item => {
							const parts = item.type.split('/');
							const extname = parts[parts.length - 1];
							return {
								url: item.path,
								name: item.name,
								extname: extname
							}
						})
						displayContent.value.push({
							component: SmallImageItemVue,
							data: data
						})
					}
				});
				break;
			case 'video':
				uni.chooseVideo({
					// count:1
					// type: ['video'],
					// sourceType:['album','camera'],
					maxDuration:60,
					success: function(res) {
						displayContent.value.push({
							component: ProductVdieoItemVue,
							data: {
								name:res.name,
								tempFilePath:res.tempFilePath
							}
						})
					}
				});
		}

		if (type === 'text') {
			displayContent.value.push({
				component: TextItemVue,
				data: ''
			})
		}
		// else if(type==='bigImage'){
		// 	uni.chooseImage({
		// 		count: 1, //默认9
		// 		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		// 		sourceType: ['album'], //从相册选择
		// 		success: function (res) {
		// 			//TODO 调用文件上传接口，将返回的地址传给子组件
		// 			displayContent.value.push({
		// 				component: SmallImageItemVue, data: res.tempFilePaths[0]
		// 			})
		// 		}
		// 	});
		// }
		// else if(type === 'smallImage'){
		// 	uni.chooseImage({
		// 		count: 30, //默认9
		// 		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		// 		sourceType: ['album'], //从相册选择
		// 		success: function (res) {
		// 			//TODO 调用文件上传接口，将返回的地址传给子组件
		// 			const data = res.tempFiles.map(item=>{
		// 				const parts = item.type.split('/');
		// 				const extname = parts[parts.length - 1];
		// 				return {
		// 					url:item.path,
		// 					name:item.name,
		// 					extname:extname
		// 				}
		// 			})
		// 			displayContent.value.push({
		// 				component: SmallImageItemVue, data: data
		// 			})
		// 		}
		// 	});
		// }

	}
</script>

<style lang="scss" scoped>
	.generator_product_layout {
		background: url('../../static/imgs/publish/publish_bg.jpeg') no-repeat 50% -100% scroll;
		width: 100vw;
		height: 100vh;

		.product_content {
			width: 100vw;
			height: 100vh;
			position: absolute;
			top: 700rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			.generator_header {
				width: 100%;
				display: flex;
				align-items: center;

				.avtor {
					width: 140rpx;
					height: 140rpx;
					margin-right: 20rpx;
				}

				.user_name {
					font-size: 36rpx;
					font-weight: 600;
				}
			}

			.notice_bar_layout {
				height: 70rpx;
				margin-top: 20rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.spu_content_layout {
				margin-top: 40rpx;
				height: 100%;

				.spu_name {
					padding: 20rpx;
					font-size: 44rpx;
					font-weight: 600;
					margin-bottom: 10rpx;
					border-bottom: 1rpx solid #ccc;
					height: 100rpx;
					display: flex;
					align-items: center;
				}

				.uni-card__content {
					display: flex;
					height: 100%;

					.spu_titlte_layout {
						align-items: center;
						display: flex;
						height: 140rpx;
						width: 100%;
						border-bottom: 1rpx solid #ccc;

						.titlte {
							height: 100%;
							font-size: 34rpx;
						}
					}

					.content-display {
						height: 100%;
						margin: 20rpx 0;
						
					}

					

				}


			}
		}


	}
</style>